<template>
  <div>
    <el-card>
      <el-col :span="8" class="leftaside">
        <el-row class="btns">
          <el-button type="primary" @click="addDialogvisibled">新增</el-button>
          <el-button type="primary" @click="editDialogvisibled">修改</el-button>
          <el-button type="primary" @click="deleted">删除</el-button>
          <el-button type="primary" @click="refresh">刷新</el-button>
        </el-row>
        <el-row>
          <el-table
            ref="singleTable"
            :data="MenuList"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%;"
          >
            <el-table-column property="menuName" width="420" align="center"></el-table-column>
          </el-table>
          <!-- <p v-for="(item,index) in MenuList" :key="index">{{item.menuName}}</p> -->
        </el-row>
      </el-col>
      <el-col :span="16" class="rightcontent">
        <el-row class="menuTitle" style="border-right:none;">
          <h1>菜单详情</h1>
        </el-row>
        <el-row class="inputs">
          <el-form :model="detailformData">
            <div class="menuInput">
              <el-form-item label="菜单名称">
                <el-input v-model="detailformData.menuName"></el-input>
              </el-form-item>
              <el-form-item label="菜单路由">
                <el-input v-model="detailformData.menuPath"></el-input>
              </el-form-item>
            </div>
            <div class="menuInput">
              <!-- <el-form-item label="版本号">
                <el-input v-model="detailformData.version"></el-input>
              </el-form-item> -->
              <el-form-item label="备注" class="tips">
                <el-input v-model="detailformData.menuRemark"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-row>
      </el-col>
    </el-card>
    <!-- 新增对话框区域 -->
    <el-dialog title="新增菜单" :visible.sync="dialogVisible" width="22%" @close="FromClosed">
      <el-form :model="addformData" status-icon :rules="addFormRules" ref="addFormRef">
            <el-form-item label="名称" prop="menuName" style="transform:translateX(-10px)">
              <el-input v-model="addformData.menuName"></el-input>
            </el-form-item>
            <el-form-item label="路径" prop="menuPath">
              <el-input v-model="addformData.menuPath"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="menuRemark">
              <el-input v-model="addformData.menuRemark"></el-input>
            </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibled">取 消</el-button>
        <el-button type="primary" @click="addMenu">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改菜单 -->
    <!-- :label-position="labelPosition" -->
    <el-dialog title="修改菜单" :visible.sync="editdialogVisible" width="30%" @close="editFromClosed">
      <el-form :model="editformData" status-icon :rules="editFormRules" ref="editFormRef"  label-width="70px">
            <el-form-item label="名称" prop="menuName">
              <el-input v-model="editformData.menuName"></el-input>
            </el-form-item>
            <el-form-item label="版本号" prop="version">
              <el-input v-model="editformData.version"></el-input>
            </el-form-item>
            <el-form-item label="菜单路由">
              <el-input v-model="editformData.menuPath"></el-input>
            </el-form-item>
            <el-form-item label="菜单备注">
              <el-input v-model="editformData.menuRemark"></el-input>
            </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import req from "@/api/menu-manage.js";
export default {
  name: "menu-manage",
  data() {
    return {
      // 设置新增对话框默认为隐藏
      dialogVisible: false,
      // 设置修改对话框默认为隐藏
      editdialogVisible: false,
      // 新增会话框表格数据
      addformData: {},
      // 修改会话框表格数据
      editformData: {},
      // 菜单详情
      detailformData: {},
      // 选中菜单的id
      currentRow: "",
      // 菜单数据
      MenuList: [],
      Role:'',
      // 新增表单验证
      addFormRules: {
        // 菜单名验证
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
      },
      // 修改表单验证
      editFormRules: {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },],
        version: [{ required: true, message: "版本号", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getUser(),
    this.returnMenuByRole();
  },
  methods: {
    // 监听添加用户框的开关情况，并清除填写内容
    FromClosed() {
      this.$refs.FormRef.resetFields();
    },
    // 新增
    addDialogvisibled() {
      this.dialogVisible = true;
    },
    // 新增取消按钮
    dialogVisibled(){
this.$refs.addFormRef.resetFields();
this.dialogVisible=false
    },
    // 修改
    editFromClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 查询菜单详情
    editDialogvisibled() {
      if (this.currentRow) {
        this.editdialogVisible = true;
        req("getMenu", {
          menuId: this.currentRow
        }).then(data => {
          // console.log(data);
          this.editformData = data.data;
        });
      } 
    },
    // 获取登陆角色
   getUser() {
      req("returnUser", {
        
      }).then(data => {
        this.Role=data.data.role
        this.returnMenuByRole()
      });
    },
    // 菜单查询returnMenuByRole
    returnMenuByRole() {
      req("listMenu", {
        // role: parseInt(this.Role)
      }).then(data => {
        console.log('角色',data);
        this.MenuList = data.data;
      });
    },
    // 新增菜单
    addMenu() {
      // 使用validate触发表单验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        req("addMenu", {
          menuName: this.addformData.menuName,
          menuPath: this.addformData.menuPath,
          menuRemark: this.addformData.menuRemark
        }).then(data => {
          if (data.code !== 0) {
            return this.$message.error(data.msg);
          } else {
            console.log(data);
            // 隐藏添加用户框
            this.dialogVisible = false;
            // 弹出提示框
            this.$message.success(data.msg);
            this.$refs.addFormRef.resetFields();
            // 重新获取用户信息数据，从而刷新页面
            this.returnMenuByRole();
          }
        });
      });
    },
    // 修改菜单
    editMenu() {
      this.editformData.version = parseInt(this.editformData.version);
      // console.log(typeof this.editformData.version)
      console.log(this.currentRow);
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return;
        req("updateMenu", {
          menuId: this.currentRow,
          ...this.editformData
        }).then(data => {
          console.log(data);
          if (data.code !== 0) {
            return this.$message.error(data.msg);
          } else {
            console.log(data);
            // 隐藏添加用户框
            this.editdialogVisible = false;
            // 弹出提示框
            this.$message.success(data.msg);
            // 重新获取用户信息数据，从而刷新页面
            this.returnMenuByRole();
            // this.reload();
          }
        });
      });
    },
    // 删除菜单
    async deleted() {
      if(!this.currentRow){
        this.$message.error('请先选择要删除的菜单')
        // this.reload()
      }else{
const confirmResult = await this.$confirm(
        "此操作将永久删除所选菜单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message("已取消删除");
      } else {
        req("deleteMenu", {
          menuId: this.currentRow
        }).then(data => {
          console.log('删除',data);
          if (data.code !== 0) {
            return this.$message.error(data.msg);
          } else if (data.code === 0) {
            this.$message.success(data.msg);
            // this.reload();
            this.returnMenuByRole();
          }
        });
      }
      }
    },
    // 获取选中的菜单数据
    handleCurrentChange(val) {
      console.log(val);
      this.currentRow = val.menuId;
      // if(val.menuId){
      //   console.log('1ww')
      // }
      req("getMenu", {
        menuId: this.currentRow
      }).then(data => {
        this.detailformData = data.data;
      });
    },
    // 刷新
    refresh() {
      // this.reload();
      this.returnMenuByRole();
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
// 设置输入框宽度
.el-input {
  width: 200px;
}
.menuInput {
  display: flex;
}
.el-form-item {
  display: flex;
  margin-left: 20px;
}
.tips {
  margin-left: 46.7px;
}
.menuTitle {
  margin-top: -17px;
  h1{
    transform: translateX(30%);
  }
}
.el-card {
  border: 1px solid #eee;
}
.el-row {
  border: 1px solid #eee;
}
.btns {
  height: 66px;
  margin-top: -17px;
  display: flex;
  align-items: center;
  transform: translateX(10%);
  border: none;
}
p {
  padding: 16px;
  margin-top: -1px;
  margin-bottom: 1px;
}
p:hover {
  background-color: rgba(236, 245, 255, 1);
}
.leftaside {
  margin-left: -20px;
  margin-top: -3px;
}
.rightcontent {
  margin-top: -3px;
  margin-right: -164px;
  /* margin-left: 20px; */
  width: 876px;
}
.inputs {
  height: 373px;
  border-right: none;
  border-bottom: none;
}
.el-table /deep/ th{
  display: none;
}

</style>
